<template>
  <div>
    <h4>当前最新的count值为: {{count}}</h4>
    <h4>{{showNum}}</h4>
    <button @click="btnHandler1">-1</button>
    <button @click="btnHandler2">-N</button>

    <button @click="btnHandler3">-1 Async</button>
    <button @click="btnHandler4">-N Async</button>

  </div>
</template>

<script>

	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

	export default {
		name: "Substraction",
		methods: {
			...mapMutations(['subCount', 'subN']),
			btnHandler1() {
        this.subCount();
			},
			btnHandler2() {
        this.subN(3);
			},

			// 触发action 方式2 使用 mapActions
      // 相当于在Substration 组件中定义了两个methods subAsync 和 subNAsync
      ...mapActions(['subAsync', 'subNAsync']),

			btnHandler3() {
        this.subAsync();
			},

      btnHandler4() {
				this.subNAsync(3);
      },

		},
		computed: {
			// 展开表达式, 相当于定义了一个计算属性 count
			...mapState(['count']),

			// 使用getters 的第二种方式
      ...mapGetters(['showNum']),

		}
	}
</script>

<style scoped>

</style>